<template>
    <div class="article banner top">
        <div class="content">
            <div class="top bread-nav footnote">
                <div class="left">
                    <div class="flex-row" id="breadcrumb">
                        <a class="cap breadcrumb" href="/">主页</a>
                        <span class="sep"></span>
                        <a class="cap breadcrumb" href="/animes/">钟意在追番</a>
                    </div>
                    <div class="flex-row" id="post-meta">
                        <a class="author" href="/author/ThatCoder/">钟意</a>
                        <span class="sep"></span>
                        <span class="text created"><time datetime="2024-08-13T16:47:40.291Z">2天前</time></span>
                        <span class="sep updated"></span><span class="text updated">更新于：<time
                                datetime="2024-08-13T16:47:40.291Z">2 天前</time></span>
                    </div>
                </div>
            </div>
            <div class="bottom only-title">
                <div class="text-area">
                    <h1 class="text title"><span>钟意在追番</span></h1>
                </div>
            </div>

        </div>
    </div>
    <article class="md-text content">
        <blockquote>
            <p>生命不息，追番不止！
            </p>
        </blockquote>
        <div class="bangumi-tabs">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="'想看(' + sees.total + ')'" name="first">
                    <div>
                        <div id="bangumi-item1" class="bangumi-show">
                            <div class="bangumi-item" v-for="(item, index) in sees.list" :key="index">
                                <div class="bangumi-picture"><img class="lazy entered loaded" :src="item.cover"
                                        :data-src="item.cover" referrerpolicy="no-referrer" width="110"
                                        style="width:110px;margin:10px auto;" data-ll-status="loaded">
                                </div>
                                <div class="bangumi-info">
                                    <div class="bangumi-title">
                                        <a target="_blank" :href="item.url">{{ item.title }}</a>
                                    </div>
                                    <div class="bangumi-meta">
                                        <span class="bangumi-info-items" style="color:#ff6333">
                                            <span class="bangumi-info-item">
                                                <span class="bangumi-info-total">全{{ item.total_count }}话</span><em
                                                    class="bangumi-info-label-em">0</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-area">
                                                <span class="bangumi-info-label">番剧</span> <em>{{ item.season_type_name
                                                    }}</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-play">
                                                <span class="bangumi-info-label">总播放</span>
                                                <em>{{ Math.floor((item.stat.view) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-follow">
                                                <span class="bangumi-info-label">追番人数</span> <em>{{
                                                    Math.floor((item.stat.follow) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-coin">
                                                <span class="bangumi-info-label">硬币数</span>
                                                <em>{{ Math.floor((item.stat.coin) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-danmaku">
                                                <span class="bangumi-info-label">弹幕总数</span> <em>{{
                                                    Math.floor((item.stat.danmaku
                                                    ) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-info-item-score">
                                                <span class="bangumi-info-label">评分</span> <em
                                                    v-if="item.rating.score">{{ item.rating.score }}</em>
                                            </span>
                                        </span>
                                    </div>
                                    <div class="bangumi-comments">
                                        <p>简介：
                                            {{ item.evaluate }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="bangumi-pagination"
                                style="display: flex; justify-content: center; align-items: center; height: 100%;">
                                <el-pagination background layout="prev, pager, next" :total="sees.total"
                                    @current-change="handleCurrentChange"></el-pagination>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'在看(' + watching.total + ')'" name="second">
                    <div>
                        <div id="bangumi-item1" class="bangumi-show">
                            <div class="bangumi-item" v-for="(item, index) in watching.list" :key="index">
                                <div class="bangumi-picture"><img class="lazy entered loaded" :src="item.cover"
                                        :data-src="item.cover" referrerpolicy="no-referrer" width="110"
                                        style="width:110px;margin:10px auto;" data-ll-status="loaded">
                                </div>
                                <div class="bangumi-info">
                                    <div class="bangumi-title">
                                        <a target="_blank" :href="item.url">{{ item.title }}</a>
                                    </div>
                                    <div class="bangumi-meta">
                                        <span class="bangumi-info-items" style="color:#ff6333">
                                            <span class="bangumi-info-item">
                                                <span class="bangumi-info-total">全{{ item.total_count }}话</span><em
                                                    class="bangumi-info-label-em">0</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-area">
                                                <span class="bangumi-info-label">番剧</span> <em>{{ item.season_type_name
                                                    }}</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-play">
                                                <span class="bangumi-info-label">总播放</span>
                                                <em>{{ Math.floor((item.stat.view) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-follow">
                                                <span class="bangumi-info-label">追番人数</span> <em>{{
                                                    Math.floor((item.stat.follow) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-coin">
                                                <span class="bangumi-info-label">硬币数</span>
                                                <em>{{ Math.floor((item.stat.coin) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-danmaku">
                                                <span class="bangumi-info-label">弹幕总数</span> <em>{{
                                                    Math.floor((item.stat.danmaku
                                                    ) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-info-item-score">
                                                <span class="bangumi-info-label">评分</span> <em v-if="item.rating">{{
                                                    item.rating.score }}</em><em v-if="!item.rating">暂无评分</em>
                                            </span>
                                        </span>
                                    </div>
                                    <div class="bangumi-comments">
                                        <p>简介：
                                            {{ item.evaluate }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="bangumi-pagination"
                                style="display: flex; justify-content: center; align-items: center; height: 100%;">
                                <el-pagination background layout="prev, pager, next" :total="watching.total"
                                    @current-change="handleCurrentChange"></el-pagination>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'已看(' + seens.total + ')'" name="third">
                    <div>
                        <div id="bangumi-item1" class="bangumi-show">
                            <div class="bangumi-item" v-for="(item, index) in seens.list" :key="index">
                                <div class="bangumi-picture"><img class="lazy entered loaded" :src="item.cover"
                                        :data-src="item.cover" referrerpolicy="no-referrer" width="110"
                                        style="width:110px;margin:10px auto;" data-ll-status="loaded">
                                </div>
                                <div class="bangumi-info">
                                    <div class="bangumi-title">
                                        <a target="_blank" :href="item.url">{{ item.title }}</a>
                                    </div>
                                    <div class="bangumi-meta">
                                        <span class="bangumi-info-items" style="color:#ff6333">
                                            <span class="bangumi-info-item">
                                                <span class="bangumi-info-total">全{{ item.total_count }}话</span><em
                                                    class="bangumi-info-label-em">0</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-area">
                                                <span class="bangumi-info-label">番剧</span> <em>{{ item.season_type_name
                                                    }}</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-play">
                                                <span class="bangumi-info-label">总播放</span>
                                                <em>{{ Math.floor((item.stat.view) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-follow">
                                                <span class="bangumi-info-label">追番人数</span> <em>{{
                                                    Math.floor((item.stat.follow) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-coin">
                                                <span class="bangumi-info-label">硬币数</span>
                                                <em>{{ Math.floor((item.stat.coin) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-danmaku">
                                                <span class="bangumi-info-label">弹幕总数</span> <em>{{
                                                    Math.floor((item.stat.danmaku
                                                    ) / 10000) }}
                                                    万</em>
                                            </span>
                                            <span class="bangumi-info-item bangumi-info-item-score">
                                                <span class="bangumi-info-label">评分</span> <em v-if="item.rating">{{
                                                    item.rating.score }}</em><em v-if="!item.rating">暂无评分</em>
                                            </span>
                                        </span>
                                    </div>
                                    <div class="bangumi-comments">
                                        <p>简介：
                                            {{ item.evaluate }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="bangumi-pagination"
                                style="display: flex; justify-content: center; align-items: center; height: 100%;">
                                <el-pagination background layout="prev, pager, next" v-show="seens.total!==0" :total="seens.total"
                                    @current-change="handleCurrentChange"></el-pagination>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </article>
</template>
<script>
import { getBiliBliSeen, getBiliBliWantSee, getBiliBliWatching } from '@/api/third';

export default {
    data() {
        return {
            seens: {
                list: [],
                pn: 1,
                ps: 10,
                total: 0
            },
            activeName: 'first',
            sees:  {
                list: [],
                pn: 1,
                ps: 10,
                total: 0
            },
            currentPage: 1,
            pageSize: 10,
            watching:  {
                list: [],
                pn: 1,
                ps: 10,
                total: 0
            },
        }
    },
    mounted() {
        this.getSees();
        this.getWatching();
        this.getSeens();
    },

    methods: {
        handleClick(tab) {
            if (tab.props.name === 'first') {
                this.getSees();
            } else if (tab.props.name === 'second') {
                this.getWatching();
            } else if (tab.props.name === 'third') {
                this.getSeens();
            }
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            if (this.activeName === 'first') {
                this.getSees();
            } else if (this.activeName === 'second') {
                this.getWatching();
            } else if (this.activeName === 'third') {
                this.getSeens();
            }
        },
        getSees() {
            getBiliBliWantSee(this.currentPage, this.pageSize).then(res => {
                this.sees = res.data;
            }).catch(err => {
                console.log(err);
            })
        },
        getWatching() {
            getBiliBliWatching(this.currentPage, this.pageSize).then(res => {
                this.watching = res.data;
            }).catch(err => {
                console.log(err);
            })
        },
        getSeens() {
            getBiliBliSeen(this.currentPage, this.pageSize).then(res => {
                this.seens = res.data;
            }).catch(err => {
                console.log(err);
            })
        }


    }
}
</script>

<style>
.article-title {
    display: none;
}

.bread-nav,
.article-title {
    display: none;
}

.bangumi-tabs {
    margin-bottom: 15px;
    margin-top: 15px
}

.bangumi-tab {
    padding: 5px
}

a.bangumi-tab {
    text-decoration: none
}

.bangumi-active {
    background: #657b83;
    color: #fff
}

.bangumi-item {
    position: relative;
    clear: both;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    min-height: 180px
}

@media screen and (max-width:600px) {
    .bangumi-item {
        width: 100%
    }
}

.bangumi-picture {
    position: absolute;
    left: 0;
    top: 10px;
    width: 110px
}

.bangumi-picture img {
    margin: 10px 0
}

.bangumi-info {
    padding-left: 120px ;
    margin-top: 10px
}

.bangumi-meta {
    font-size: 12px;
    padding-right: 10px;
    height: 45px
}

.bangumi-comments {
    font-size: 12px;
    margin-top: 10px
}

.bangumi-comments>p {
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.bangumi-pagination {
    margin-top: 15px;
    text-align: center;
    margin-bottom: 10px
}

.bangumi-button {
    padding: 5px
}

.bangumi-button:hover {
    background: #657b83;
    color: #fff
}

.bangumi-hide {
    display: none
}

.bangumi-show {
    display: block
}

.bangumi-title {
    font-size: 18px
}

.bangumi-title a {
    line-height: 1;
    text-decoration: none
}

.bangumi-info-items {
    font-size: 12px;
    color: #2fd8d8;
    padding-top: 10px;
    line-height: 1;
    float: left;
    width: 100%
}

.bangumi-info-item {
    display: inline-block;
    width: 13%;
    border-right: 1px solid #2fd8d8;
    text-align: center;
    height: 34px
}

.bangumi-info-label {
    display: block;
    line-height: 12px
}

.bangumi-info-item em {
    display: block;
    padding-top: 6px;
    line-height: 17px;
    font-style: normal;
    font-weight: 700
}

.bangumi-info-total {
    padding-top: 11px;
    display: block;
    line-height: 12px;
    font-weight: 700
}

.bangumi-info-item-score {
    border-right: 1px solid #0000;
    width: 50px
}

.bangumi-info-label-em {
    color: transparent;
    opacity: 0;
    visibility: hidden;
    line-height: 6px !important;
    padding: 0 !important
}

@media (max-width:650px) {

    .bangumi-coin,
    .bangumi-type {
        display: none
    }

    .bangumi-info-item {
        width: 16%
    }
}

@media (max-width:590px) {

    .bangumi-danmaku,
    .bangumi-wish {
        display: none
    }

    .bangumi-info-item {
        width: 19%
    }
}

@media (max-width:520px) {

    .bangumi-doing,
    .bangumi-play {
        display: none
    }

    .bangumi-info-item {
        width: 24%
    }
}

@media (max-width:480px) {

    .bangumi-collect,
    .bangumi-follow {
        display: none
    }

    .bangumi-info-item {
        width: 30%
    }
}

@media (max-width:400px) {
    .bangumi-area {
        display: none
    }

    .bangumi-info-item {
        width: 45%
    }
}

.bangumi-my-comments {
    border: 1px dashed #8f8f8f;
    padding: 3px;
    border-radius: 5px;
    margin-left: -120px
}

.bangumi-starstop {
    background: url(https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.7.9/lib/img/rate_star_2x.png) 100% 100%/10px 19.5px repeat-x;
    height: 10px;
    width: 50px;
    display: inline-block;
    float: none
}

.bangumi-starlight {
    background: url(https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.7.9/lib/img/rate_star_2x.png) 0 0/10px 19.5px repeat-x;
    height: 10px;
    display: block;
    width: 100%
}

.bangumi-starlight.stars1 {
    width: 5px
}

.bangumi-starlight.stars2 {
    width: 10px
}

.bangumi-starlight.stars3 {
    width: 15px
}

.bangumi-starlight.stars4 {
    width: 20px
}

.bangumi-starlight.stars5 {
    width: 25px
}

.bangumi-starlight.stars6 {
    width: 30px
}

.bangumi-starlight.stars7 {
    width: 35px
}

.bangumi-starlight.stars8 {
    width: 405px
}

.bangumi-starlight.stars9 {
    width: 45px
}

.bangumi-starlight.stars10 {
    width: 50px
}
</style>